<script setup>

const list = [
    { name: "系统首页", class: 'home', link: '/home' },
    { name: "系统日志", class: 'syslogs', link: '/syslogs' },
    { name: "技术支持", class: 'techsupport', link: '/techsupport' },
]

</script>

<template>
    <div class="left">
        <template v-for="item in list" :key="item.link">
            <router-link :to="item.link" :exact-active-class="'active-link-' + item.class">
                <div class="tab">
                    <div class="router-icon" :class="'router-icon-' + item.class"> </div>
                    <div class="title">{{ item.name }}</div>
                </div>
            </router-link>
        </template>
    </div>
</template>

<style scoped>
.left {
    width: 100%;
    height: 100%;
    padding-top: 20px;
    position: relative;
    overflow-y: auto;
}

.company-info {
    user-select: none;
    cursor: pointer;
    position: absolute;
    color: #b7b6b6;
    font-size: 12px;
    bottom: 20px;
    left: 30px;
    transition: color .3s;
}

.company-info:hover {
    color: #588cff;
}

.tab {
    width: 100%;
    height: 60px;
    letter-spacing: 1px;
    font-weight: 700;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    transition: background-color .3s;
}

.title {
    user-select: none;
    transition: color .3s;
}

.tab:hover {
    background-color: #2e303c;

    .title {
        color: #dfdfe0;
    }
}

a {
    text-decoration: none;
    color: #626772;
}

.active-link-home .tab,
.active-link-home .title,
.active-link-techsupport .tab,
.active-link-techsupport .title,
.active-link-syslogs .tab,
.active-link-syslogs .title {
    background-color: #2e303c;
    color: #dfdfe0;
}

.router-icon {
    width: 20px;
    height: 20px;
    margin-left: 50px;
    margin-right: 15px;
    transition: background .3s;
    background-repeat: no-repeat, no-repeat;
    background-position: bottom right, top left;
    background-size: 100% 100%;
}

.router-icon-home {
    background-image: url(../assets/left/icon1-weixuanzhong.png);
}

.active-link-home .router-icon-home {
    background-image: url(../assets/left/icon1-xuanzhong.png);
}

.router-icon-syslogs {
    background-image: url(../assets/left/icon7-weixuanzhong.png);
}

.active-link-syslogs .router-icon-syslogs {
    background-image: url(../assets/left/icon7-xuanzhong.png);
}

.router-icon-techsupport {
    background-image: url(../assets/left/weixuanzhong.png);
}

.active-link-techsupport .router-icon-techsupport {
    background-image: url(../assets/left/xuanzhong.png);
}
</style>
